<!DOCTYPE HTML>
<html>
<head>
    <title>Pixi Morph by Photon Storm</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0" />
    <link rel="stylesheet" href="storm.css">
    <script src="../../bin/pixi.dev.js"></script>
</head>
<body>

    <a href="http://www.photonstorm.com"><img src="assets/photonstorm.png" width="121" height="18" id="photonstorm" title="Photon Storm" /></a>
    <a href="http://www.html5gamedevs.com/topic/59-pixijs-has-landed/"><img src="assets/pixi.png" width="56" height="22" id="pixi" title="pixi.js" /></a>

    <script>
    window.addEventListener('orientationchange',resize,false);
    window.addEventListener('resize',resize,false);

    document.addEventListener('DOMContentLoaded', start, false);

    var w = 1024;
    var h = 768;

    var n = 2000;
    var d = 1;
    var current = 1;
    var objs = 17;
    var vx = 0;
    var vy = 0;
    var vz = 0;
    var points1 = [];
    var points2 = [];
    var points3 = [];
    var tpoint1 = [];
    var tpoint2 = [];
    var tpoint3 = [];
    var balls = [];
    var renderer;
    var stage;

    function start() {
        var ballTexture = new PIXI.Texture.fromImage("assets/pixel.png");
        renderer = PIXI.autoDetectRenderer(w, h);
        stage = new PIXI.Stage;

        document.body.appendChild(renderer.view);

        makeObject(0);

        for (var i = 0; i < n; i++)
        {
            tpoint1[i] = points1[i];
            tpoint2[i] = points2[i];
            tpoint3[i] = points3[i];

            var tempBall = new PIXI.Sprite(ballTexture);
            tempBall.anchor.x = 0.5;
            tempBall.anchor.y = 0.5;
            tempBall.alpha = 0.5;
            balls[i] = tempBall;

            stage.addChild(tempBall);
        }

        resize();

        setTimeout(nextObject, 5000);

        requestAnimFrame(update);
    }

    function nextObject() {
        current++;
        if (current > objs)
        {
            current = 0;
        }

        makeObject(current);
        setTimeout(nextObject, 8000);
    }

    function makeObject(t) {
        var xd;

        switch (t)
        {
            case 0:
                for (var i = 0; i < n; i++)
                {
                    points1[i] = -50 + Math.round(Math.random() * 100);
                    points2[i] = 0;
                    points3[i] = 0;
                }
                break;
            case 1:
                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(t * 360 / n) * 10);
                    points2[i] = (Math.cos(xd) * 10) * (Math.sin(t * 360 / n) * 10);
                    points3[i] = Math.sin(xd) * 100;
                }
                break;
            case 2:
                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(t * 360 / n) * 10);
                    points2[i] = (Math.cos(xd) * 10) * (Math.sin(t * 360 / n) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
            case 3:

                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10);
                    points2[i] = (Math.cos(xd) * 10) * (Math.sin(xd) * 10);
                    points3[i] = Math.sin(xd) * 100;
                }
                break;
            case 4:

                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10);
                    points2[i] = (Math.cos(xd) * 10) * (Math.sin(xd) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
            case 5:

                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10);
                    points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(xd) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
            case 6:

                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10);
                    points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(xd) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
            case 7:

                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10);
                    points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(i * 360 / n) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
            case 8:

                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10);
                    points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(i * 360 / n) * 10);
                    points3[i] = Math.sin(xd) * 100;
                }
                break;
            case 9:

                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10);
                    points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(xd) * 10);
                    points3[i] = Math.sin(xd) * 100;
                }
                break;
            case 10:
                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10);
                    points2[i] = (Math.cos(xd) * 10) * (Math.sin(xd) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
            case 11:
                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10);
                    points2[i] = (Math.sin(xd) * 10) * (Math.sin(i * 360 / n) * 10);
                    points3[i] = Math.sin(xd) * 100;
                }
                break;
            case 12:
                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10);
                    points2[i] = (Math.sin(xd) * 10) * (Math.sin(xd) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
            case 13:
                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10);
                    points2[i] = (Math.sin(i * 360 / n) * 10) * (Math.sin(xd) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
            case 14:
                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.sin(xd) * 10) * (Math.cos(xd) * 10);
                    points2[i] = (Math.sin(xd) * 10) * (Math.sin(i * 360 / n) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
            case 15:
                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10);
                    points2[i] = (Math.sin(i * 360 / n) * 10) * (Math.sin(xd) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
            case 16:
                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10);
                    points2[i] = (Math.sin(i * 360 / n) * 10) * (Math.sin(xd) * 10);
                    points3[i] = Math.sin(xd) * 100;
                }
                break;
            case 17:
                for (var i = 0; i < n; i++)
                {
                    xd = -90 + Math.round(Math.random() * 180);
                    points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10);
                    points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(i * 360 / n) * 10);
                    points3[i] = Math.sin(i * 360 / n) * 100;
                }
                break;
        }
    }

    function resize()
    {
        w = window.innerWidth - 16;
        h = window.innerHeight - 16;

        renderer.resize(w, h);
    }

    function update()
    {
        var x3d, y3d, z3d, tx, ty, tz, ox;

        if (d < 250)
        {
            d++;
        }

        vx += 0.0075;
        vy += 0.0075;
        vz += 0.0075;

        for (var i = 0; i < n; i++)
        {
            if (points1[i] > tpoint1[i]) { tpoint1[i] = tpoint1[i] + 1; }
            if (points1[i] < tpoint1[i]) { tpoint1[i] = tpoint1[i] - 1; }
            if (points2[i] > tpoint2[i]) { tpoint2[i] = tpoint2[i] + 1; }
            if (points2[i] < tpoint2[i]) { tpoint2[i] = tpoint2[i] - 1; }
            if (points3[i] > tpoint3[i]) { tpoint3[i] = tpoint3[i] + 1; }
            if (points3[i] < tpoint3[i]) { tpoint3[i] = tpoint3[i] - 1; }

            x3d = tpoint1[i];
            y3d = tpoint2[i];
            z3d = tpoint3[i];

            ty = (y3d * Math.cos(vx)) - (z3d * Math.sin(vx));
            tz = (y3d * Math.sin(vx)) + (z3d * Math.cos(vx));
            tx = (x3d * Math.cos(vy)) - (tz * Math.sin(vy));
            tz = (x3d * Math.sin(vy)) + (tz * Math.cos(vy));
            ox = tx;
            tx = (tx * Math.cos(vz)) - (ty * Math.sin(vz));
            ty = (ox * Math.sin(vz)) + (ty * Math.cos(vz));

            balls[i].position.x = (512 * tx) / (d - tz) + w / 2;
            balls[i].position.y = (h/2) - (512 * ty) / (d - tz);
        }

        renderer.render(stage);

        requestAnimFrame(update);
    }
    </script>

    </body>
</html>
